<template>
	<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark=='1'">
		<el-empty description="暂无记录" :image-size="100" v-if="recordList.length==0"></el-empty>
		<el-main class="nopadding">
		<el-card shadow="hover" :body-style="{ padding: '0px' }" v-for="item in recordList" :key="item.flowId">
			<div class="code-item">
				<div class="img" :style="`background-image: -webkit-linear-gradient(top left, #fff, ${item.color} 100px)`" @click="startBpm(item.flowId)">
					<h2 style="color: white">{{ item.flowName }}</h2>
				</div>
			</div>
		</el-card>
		</el-main>
	</sc-water-mark>
	<send-dialog v-if="dialog.sendDialog" ref="sendDialog" @closed="dialog.sendDialog=false"></send-dialog>
</template>
<script>
import sendDialog from "@/views/bpm/create/sendDialog";
export default {
	components: {
		sendDialog
	},
	data() {
		return {
			dialog: {
				detailsSave:false,
			},
			recordList: [],
			waterMarkContent:'',
			waterMarkSubtext:'',
			waterMark:'0',
		}
	},
	computed: {
	},
	mounted() {
		this.waterMark = this.$TOOL.data.get("WATER_MARK");
		this.waterMarkContent = this.$TOOL.data.get("WATER_MARK_CONTENT");
		this.waterMarkSubtext = this.$TOOL.data.get("WATER_MARK_SUBTEXT");
		this.getMyBpmFlowList();
	},
	methods: {
		async getMyBpmFlowList() {
			let res = await this.$API.bpm.bpmFlow.getMyBpmFlowList.get({model:'0'});
			if (res.code == 200) {
				this.recordList = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		startBpm(flowId) {
			this.dialog.sendDialog = true
			this.$nextTick(() => {
				this.$refs.sendDialog.open().setData({flowId: flowId})
			})
		},
	}
}
</script>
<style scoped>
.custom-tree-node {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}

.code-item {
	cursor: pointer;
}

.code-item .img {
	width: 100%;
	height: 50px;
	background: linear-gradient(to right, #409eff, #f56c6c);
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-item .img i {
	font-size: 50px;
	color: #fff;
	background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.code-item .title {
	padding: 10px;
	display: flex;
}

.code-item .title h4 {
	font-size: 12px;
	color: #999;
	font-weight: normal;
	margin-top: 5px;
}

.opt-div {
	font-size: 16px;
	width: 25%;
	display: inline-block;
	margin: 5px 0px 10px 0px;
	text-align: center;
}
</style>
